<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>倒计时</title>

        <style>
            #timer{
                width:300px;
                height:200px;
                margin:0 auto;
                margin-top:100px;
                text-align:center;
                box-shadow:0 0 10px #dedede;
                border-radius:40px;
                padding:25px;
            }

            #time{
                display:inline-block;
                width:300px;
                height:50px;
                border:2px solid #ddd;
                background: #111;
                opacity:0.5;
                border-radius:50px;
                color:lightslategray;
                line-height:50px;
                text-align:center;
                margin-top:30px;
            }
            .button-list{
                display:flex;
                align-items:center;
                justify-content: space-between;
            }
            button{
                outline:none;
                height:40px;
                display:flex;
                align-items:center;
                margin-top:35px;
                border-radius:50%;
            }
            #start{
                background-color: yellow;
            }
            #reset{
                background-color: rgb(214, 221, 214);
            }
            #stop{
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <div id="timer">

            <input type="text" id = "total" value="01" style = "display:none" />

            
            <div class = "timer-box" style="display:flex;align-items:center;justify-content: space-between;">
                <!--<input id = "hour" style="width:65px;height:30px;background:dimgrey;font-size: 5.5mm;
                color:rgb(153,153,153);border-radius:40px;margin-top:40px;"
                type="text" value="00" />!-->
                <div id="hour" style="width:65px;height:30px;background:dimgrey;font-size: 5.5mm;
                color:rgb(153,153,153);border-radius:40px;margin-top:40px;">00</div>

                <span style="margin-top:40px"> : </span>

                <!--<input id = "minute" style="margin-top:40px;width:65px;height:30px;background:dimgrey;font-size: 5.5mm;color:rgb(153,153,153);border-radius:40px;"
                type="text" value="05" />!-->
                <div id="minute" style="width:65px;height:30px;background:dimgrey;font-size: 5.5mm;
                color:rgb(153,153,153);border-radius:40px;margin-top:40px;">01</div>

                <span style="margin-top:40px"> : </span>

                <!--<input id = "second" style="margin-top:40px;width:65px;height:30px;background:dimgrey;font-size: 5.5mm;color:rgb(153,153,153);border-radius:40px;"
                 type="text" value="00" /><!-->

                 <div id="second" style="width:65px;height:30px;background:dimgrey;font-size: 5.5mm;
                color:rgb(153,153,153);border-radius:40px;margin-top:40px;">00</div>
            </div>


            <br/>
            <div class="button-list">
                <button id ="start" onclick="start();">开始</button>
                <button id = "reset" onclick="reset();">重置</button>
                <button id ="pause" onclick="pause();">暂停</button>
            </div>

            <div id ="video">
                <video src="./video/start.mp3" video-event='start' controls="controls">开始</video>
                <video src="./video/let30s.mp3" video-event='let30s' controls="controls">开始</video>
                <video src="./video/let10s.mp3" video-event='let10s' controls="controls">开始</video>
                <video src="./video/endtime.mp3" video-event='endtime' controls="controls">开始</video>
            </div>
        </div>
    </body>
    <script>

        var totalSecond;
        var myTimer;
        isPauseClicked = false;//暂停按钮是否被点击过，默认没有
        
     //开始功能
        function start(){
            if(!isPauseClicked)
            {
                var totalMinute = parseInt(document.getElementById("total").value);
                totalSecond = totalMinute * 60;
            }


            playVideo('start');



            myTimer = setInterval(timerDown,1000);
        }

        function timerDown(){
            var hour = parseInt(totalSecond / 3600);
            var minute = parseInt(totalSecond % 3600 / 60);
            var second = totalSecond % 60;

            document.getElementById("hour").innerHTML = hour;
            document.getElementById("minute").innerHTML = minute;
            document.getElementById("second").innerHTML = second;

            totalSecond -- ;


        // 功能性判断
        if (hour == 0 && minute == 0 && second == 0) {
            playVideo('endtime');
            window.clearInterval(myTimer);
        }

        if (hour == 0 && minute == 0) {
            if (second == 30) {
                playVideo('let30s');
            } else if (second == 10) {
                playVideo('let10s');
            }
        }
        } 

        //暂停功能
        function pause(){
            clearInterval(myTimer);
            isPauseClicked = true;//避免暂停后再点击开始会从头开始
        }

        //重置功能
        function reset(){
            location.reload();
        }

        function playVideo(video) {
        var videos = document.getElementsByTagName('video');

        // 做一个对应关系
        var map = [];
        for (i = 0; i < videos.length; i++) {
            map[videos[i].getAttribute('video-event')] = i;
        }

        (videos[map[video]]).play();
    }

    </script>
</html>
